<template>
  <div class="header-menu">
    <el-menu :default-active="activeIndex" class="el-menu-demo" unique-opened mode="horizontal" :ellipsis="false"
      @select="handleSelect">
      <!-- logo -->
      <el-menu-item index="0"></el-menu-item>
      <div class="header-LOGO">
        <svg t="1667059429057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="866" width="64" height="64">
          <path
            d="M279 180.5c-4.7 0-8.4-3.8-8.4-8.4 0-7.7-5.6-14.7-13.3-15.5-8.7-0.8-16.2 6.1-16.2 14.7v0.8c0 4.7-3.8 8.4-8.4 8.4-7.7 0-14.7 5.6-15.5 13.3-0.8 8.7 6.1 16.2 14.7 16.2h0.8c4.7 0 8.4 3.8 8.4 8.4 0 7.7 5.6 14.7 13.3 15.5 8.7 0.8 16.2-6.1 16.2-14.7v-0.8c0-4.7 3.8-8.4 8.4-8.4h0.8c8.6 0 15.5-7.4 14.7-16.2-0.8-7.7-7.8-13.3-15.5-13.3zM804.1 167c-4.7 0-8.4-3.8-8.4-8.4 0-7.7-5.6-14.7-13.3-15.5-8.7-0.8-16.2 6.1-16.2 14.7v0.8c0 4.7-3.8 8.4-8.4 8.4-7.7 0-14.7 5.6-15.5 13.3-0.8 8.7 6.1 16.2 14.7 16.2h0.8c4.7 0 8.4 3.8 8.4 8.4 0 7.7 5.6 14.7 13.3 15.5 8.7 0.8 16.2-6.1 16.2-14.7v-0.8c0-4.7 3.8-8.4 8.4-8.4h0.8c8.6 0 15.5-7.4 14.7-16.2-0.8-7.7-7.8-13.3-15.5-13.3zM817.6 820.1c-4.7 0-8.4-3.8-8.4-8.4 0-7.7-5.6-14.7-13.3-15.5-8.7-0.8-16.2 6.1-16.2 14.7v0.8c0 4.7-3.8 8.4-8.4 8.4-7.7 0-14.7 5.6-15.5 13.3-0.8 8.7 6.1 16.2 14.7 16.2h0.8c4.7 0 8.4 3.8 8.4 8.4 0 7.7 5.6 14.7 13.3 15.5 8.7 0.8 16.2-6.1 16.2-14.7v-0.8c0-4.7 3.8-8.4 8.4-8.4h0.8c8.6 0 15.5-7.4 14.7-16.2-0.8-7.7-7.8-13.3-15.5-13.3z"
            fill="#9AD6E8" p-id="867"></path>
          <path
            d="M677.4 801.9c-2.3 0-4.6-0.6-6.7-1.8-4.2-2.4-6.7-6.9-6.7-11.7V610.9c0-4.8 2.6-9.3 6.8-11.7l155.7-88.5c2.1-1.2 4.4-1.8 6.7-1.8s4.7 0.6 6.8 1.8c4.1 2.4 6.7 6.8 6.7 11.6v176.2c0 4.8-2.6 9.3-6.7 11.7l-155.7 89.9c-2.3 1.2-4.6 1.8-6.9 1.8z"
            fill="#1E62A1" p-id="868"></path>
          <path
            d="M833.1 522.4v176.2l-155.7 89.9V610.9l155.7-88.5m0-27c-4.6 0-9.2 1.2-13.3 3.5l-155.7 88.5c-8.4 4.8-13.6 13.7-13.6 23.4v177.5c0 9.6 5.1 18.5 13.5 23.3 4.2 2.4 8.8 3.6 13.5 3.6 4.6 0 9.3-1.2 13.5-3.6l155.7-89.9c8.3-4.8 13.5-13.7 13.5-23.3v-176c0-9.6-5.1-18.5-13.4-23.3-4.3-2.5-9-3.7-13.7-3.7z"
            fill="#282F63" p-id="869"></path>
          <path
            d="M677.4 624.4c-2.3 0-4.7-0.6-6.8-1.8-4.1-2.4-6.7-6.8-6.7-11.6V430.7c0-4.8 2.6-9.3 6.8-11.7l155.7-88.5c2.1-1.2 4.4-1.8 6.7-1.8s4.7 0.6 6.8 1.8c4.1 2.4 6.7 6.8 6.7 11.6v180.2c0 4.8-2.6 9.3-6.8 11.7L684 622.6c-2 1.2-4.3 1.8-6.6 1.8z"
            fill="#E5F1F9" p-id="870"></path>
          <path
            d="M833.1 342.2v180.2l-155.7 88.5V430.7l155.7-88.5m0-26.9c-4.6 0-9.2 1.2-13.3 3.5l-155.7 88.5c-8.4 4.8-13.6 13.7-13.6 23.4v180.2c0 9.6 5.1 18.5 13.4 23.3 4.2 2.4 8.9 3.7 13.5 3.7s9.2-1.2 13.3-3.5l155.7-88.5c8.4-4.8 13.6-13.7 13.6-23.4V342.2c0-9.6-5.1-18.5-13.4-23.3-4.1-2.4-8.8-3.6-13.5-3.6z"
            fill="#282F63" p-id="871"></path>
          <path
            d="M657.1 448.7c-2.3 0-4.6-0.6-6.7-1.8l-4-2.3c-4.2-2.4-6.8-6.9-6.8-11.7s2.6-9.3 6.8-11.7l4-2.3c2.1-1.2 4.4-1.8 6.7-1.8s4.7 0.6 6.8 1.8c4.1 2.4 6.7 6.8 6.7 11.6v4.5c0 4.8-2.5 9.2-6.7 11.6-2.1 1.5-4.5 2.1-6.8 2.1z"
            fill="#FFDBA0" p-id="872"></path>
          <path
            d="M657.1 430.7v4.5l-4-2.3 4-2.2m0-26.9c-4.6 0-9.2 1.2-13.3 3.5l-4 2.3c-8.4 4.8-13.6 13.7-13.6 23.4s5.2 18.6 13.6 23.4l4 2.3c4.1 2.3 8.7 3.5 13.3 3.5 4.7 0 9.4-1.2 13.5-3.7 8.3-4.8 13.4-13.7 13.4-23.3v-4.5c0-9.6-5.1-18.5-13.4-23.3-4.1-2.4-8.8-3.6-13.5-3.6z"
            fill="#282F63" p-id="873"></path>
          <path
            d="M501.9 712.6c-2.3 0-4.7-0.6-6.8-1.8-4.1-2.4-6.7-6.8-6.7-11.6V695c0-4.8 2.5-9.2 6.7-11.6 2.1-1.2 4.4-1.8 6.8-1.8 2.3 0 4.6 0.6 6.7 1.8l3.7 2.1c4.2 2.4 6.8 6.9 6.8 11.7s-2.6 9.3-6.8 11.7l-3.7 2.1c-2.1 1.1-4.4 1.6-6.7 1.6z"
            fill="#FFDBA0" p-id="874"></path>
          <path
            d="M501.9 695l3.7 2.1-3.7 2.1V695m0-26.9c-4.7 0-9.4 1.2-13.5 3.7-8.3 4.8-13.4 13.7-13.4 23.3v4.2c0 9.6 5.1 18.5 13.4 23.3 4.2 2.4 8.9 3.7 13.5 3.7s9.2-1.2 13.3-3.5l3.7-2.1c8.4-4.8 13.6-13.7 13.6-23.4s-5.2-18.6-13.6-23.4l-3.7-2.1c-4.2-2.6-8.7-3.7-13.3-3.7z"
            fill="#282F63" p-id="875"></path>
          <path
            d="M346.4 801.8c-2.3 0-4.6-0.6-6.7-1.8l-155.5-89.8c-4.2-2.4-6.7-6.9-6.7-11.7V518.2c0-4.8 2.5-9.2 6.7-11.6 2.1-1.2 4.4-1.8 6.8-1.8 2.3 0 4.6 0.6 6.7 1.8L353 594.9c4.2 2.4 6.8 6.9 6.8 11.7v181.7c0 4.8-2.6 9.3-6.7 11.7-2.1 1.2-4.4 1.8-6.7 1.8z"
            fill="#1E62A1" p-id="876"></path>
          <path
            d="M190.9 518.2l155.5 88.4v181.7l-155.5-89.8V518.2m0-26.9c-4.7 0-9.4 1.2-13.5 3.7-8.3 4.8-13.4 13.7-13.4 23.3v180.4c0 9.6 5.1 18.5 13.5 23.3L333 811.8c4.2 2.4 8.8 3.6 13.5 3.6 4.6 0 9.3-1.2 13.5-3.6 8.3-4.8 13.5-13.7 13.5-23.3V606.6c0-9.7-5.2-18.6-13.6-23.4l-155.5-88.4c-4.3-2.4-8.9-3.5-13.5-3.5z"
            fill="#282F63" p-id="877"></path>
          <path d="M217.8 545.1l128.6 73.1v-11.6l-155.5-88.4v180.3l26.9 15.6z" fill="#3381BC" p-id="878"></path>
          <path
            d="M522.1 891.5c-2.3 0-4.6-0.6-6.7-1.8-4.2-2.4-6.7-6.9-6.7-11.7V699.2c0-4.8 2.6-9.3 6.8-11.7l155.2-88.3c2.1-1.2 4.4-1.8 6.7-1.8s4.7 0.6 6.8 1.8c4.1 2.4 6.7 6.8 6.7 11.6v177.5c0 4.8-2.6 9.3-6.7 11.7L529 889.6c-2.2 1.3-4.5 1.9-6.9 1.9z"
            fill="#E5F1F9" p-id="879"></path>
          <path
            d="M677.4 610.9v177.5L522.2 878V699.2l3.7-2.1 151.5-86.2m0-26.9c-4.6 0-9.2 1.2-13.3 3.5l-151.6 86.2-3.7 2.1c-8.4 4.8-13.6 13.7-13.6 23.4v178.9c0 9.6 5.1 18.5 13.5 23.3 4.2 2.4 8.8 3.6 13.5 3.6 4.6 0 9.3-1.2 13.5-3.6l155.2-89.6c8.3-4.8 13.5-13.7 13.5-23.3V610.9c0-9.6-5.1-18.5-13.4-23.3-4.3-2.4-8.9-3.6-13.6-3.6z"
            fill="#282F63" p-id="880"></path>
          <path
            d="M525.8 710.6c-2.3 0-4.6-0.6-6.7-1.8l-3.7-2.1c-4.2-2.4-6.8-6.9-6.8-11.7V519c0-4.8 2.6-9.3 6.8-11.7l151.3-86c2.1-1.2 4.4-1.8 6.7-1.8s4.6 0.6 6.7 1.8l4 2.3c4.2 2.4 6.8 6.9 6.8 11.7V611c0 4.8-2.6 9.3-6.8 11.7l-151.6 86.2c-2.1 1.1-4.4 1.7-6.7 1.7z"
            fill="#E5F1F9" p-id="881"></path>
          <path
            d="M673.4 433l4 2.3V611l-151.6 86.2-3.7-2.1V519l151.3-86m0-26.9c-4.6 0-9.2 1.2-13.3 3.5l-151.3 86c-8.4 4.8-13.6 13.7-13.6 23.4v176c0 9.7 5.2 18.6 13.6 23.4l3.7 2.1c4.1 2.3 8.7 3.5 13.3 3.5 4.6 0 9.2-1.2 13.3-3.5l151.6-86.2c8.4-4.8 13.6-13.7 13.6-23.4V435.2c0-9.7-5.2-18.6-13.6-23.4l-4-2.3c-4.1-2.3-8.7-3.4-13.3-3.4z"
            fill="#282F63" p-id="882"></path>
          <path
            d="M346.4 620.1c-2.3 0-4.6-0.6-6.7-1.8l-155.5-88.4c-4.2-2.4-6.8-6.9-6.8-11.7v-176c0-4.8 2.5-9.2 6.7-11.6 2.1-1.2 4.4-1.8 6.8-1.8 2.3 0 4.6 0.6 6.7 1.8L353 418.9c4.2 2.4 6.8 6.9 6.8 11.7v176c0 4.8-2.5 9.2-6.7 11.6-2 1.2-4.4 1.9-6.7 1.9z"
            fill="#FFDBA0" p-id="883"></path>
          <path
            d="M190.9 342.2l155.5 88.4v176l-155.5-88.4v-176m0-26.9c-4.7 0-9.4 1.2-13.5 3.7-8.3 4.8-13.4 13.7-13.4 23.3v176c0 9.7 5.2 18.6 13.6 23.4L333.1 630c4.1 2.3 8.7 3.5 13.3 3.5 4.7 0 9.4-1.2 13.5-3.7 8.3-4.8 13.4-13.7 13.4-23.3v-176c0-9.7-5.2-18.6-13.6-23.4l-155.5-88.4c-4.1-2.3-8.7-3.4-13.3-3.4z"
            fill="#282F63" p-id="884"></path>
          <path d="M217.8 362.4l128.6 73.1v-4.9l-155.5-88.4v176l26.9 15.3z" fill="#FFFFFF" p-id="885"></path>
          <path
            d="M501.9 891.5c-2.3 0-4.6-0.6-6.7-1.8L339.6 800c-4.2-2.4-6.7-6.9-6.7-11.7V606.6c0-4.8 2.5-9.2 6.7-11.6 2.1-1.2 4.4-1.8 6.8-1.8 2.3 0 4.6 0.6 6.7 1.8l155.5 88.4c4.2 2.4 6.8 6.9 6.8 11.7v183.1c0 4.8-2.6 9.3-6.7 11.7-2.2 1-4.5 1.6-6.8 1.6z"
            fill="#E5F1F9" p-id="886"></path>
          <path
            d="M346.4 606.6L501.9 695v183.1l-155.5-89.8V606.6m0-26.9c-4.7 0-9.4 1.2-13.5 3.7-8.3 4.8-13.4 13.7-13.4 23.3v181.7c0 9.6 5.1 18.5 13.5 23.3l155.5 89.8c4.2 2.4 8.8 3.6 13.5 3.6 4.6 0 9.3-1.2 13.5-3.6 8.3-4.8 13.5-13.7 13.5-23.3V695c0-9.7-5.2-18.6-13.6-23.4l-155.5-88.4c-4.3-2.4-8.9-3.5-13.5-3.5z"
            fill="#282F63" p-id="887"></path>
          <path
            d="M501.9 708.5c-2.3 0-4.6-0.6-6.7-1.8l-155.5-88.4c-4.2-2.4-6.8-6.9-6.8-11.7v-176c0-4.8 2.5-9.2 6.7-11.6 2.1-1.2 4.4-1.8 6.8-1.8 2.3 0 4.6 0.6 6.7 1.8l155.5 88.4c4.2 2.4 6.8 6.9 6.8 11.7v176c0 4.8-2.5 9.2-6.7 11.6-2.2 1.2-4.5 1.8-6.8 1.8z"
            fill="#E5F1F9" p-id="888"></path>
          <path
            d="M346.4 430.6L501.9 519v176l-155.5-88.4v-176m0-26.9c-4.7 0-9.4 1.2-13.5 3.7-8.3 4.8-13.4 13.7-13.4 23.3v176c0 9.7 5.2 18.6 13.6 23.4l155.5 88.4c4.1 2.3 8.7 3.5 13.3 3.5 4.7 0 9.4-1.2 13.5-3.7 8.3-4.8 13.4-13.7 13.4-23.3V519c0-9.7-5.2-18.6-13.6-23.4l-155.5-88.4c-4.1-2.4-8.7-3.5-13.3-3.5z"
            fill="#282F63" p-id="889"></path>
          <path
            d="M507 342.1c-2.3 0-4.6-0.6-6.7-1.8l-154.8-88c-4.2-2.4-6.8-6.8-6.8-11.7 0-4.8 2.6-9.3 6.7-11.7l163.2-94.2c2.1-1.2 4.4-1.8 6.7-1.8s4.6 0.6 6.7 1.8l155 89.5c4.2 2.4 6.7 6.9 6.7 11.7 0 4.8-2.6 9.3-6.8 11.7l-163.3 92.8c-2 1.2-4.3 1.7-6.6 1.7z"
            fill="#FFDBA0" p-id="890"></path>
          <path
            d="M515.4 146.4l154.9 89.4L507 328.7l-154.8-88 163.2-94.3m0-26.9c-4.6 0-9.3 1.2-13.5 3.6l-163.2 94.2c-8.4 4.8-13.5 13.8-13.5 23.4 0 9.7 5.2 18.6 13.6 23.3l154.8 88c4.1 2.3 8.7 3.5 13.3 3.5 4.6 0 9.2-1.2 13.3-3.5l163.3-92.8c8.4-4.8 13.6-13.7 13.6-23.3 0-9.7-5.1-18.6-13.5-23.4l-154.9-89.4c-4-2.4-8.7-3.6-13.3-3.6z"
            fill="#282F63" p-id="891"></path>
          <path d="M379.1 254.1l161.4-93.2-25.1-14.5-163.2 94.3 154.8 88 1.6-1z" fill="#FFFFFF" p-id="892"></path>
          <path
            d="M355.7 428.2c-2.3 0-4.6-0.6-6.7-1.8l-151.3-86c-4.2-2.4-6.8-6.9-6.8-11.7V326c0-4.8 2.6-9.3 6.7-11.7L345.4 229c2.1-1.2 4.4-1.8 6.7-1.8s4.6 0.6 6.7 1.8l154.8 88c4.2 2.4 6.8 6.9 6.8 11.7s-2.6 9.3-6.8 11.7l-151.3 86c-2 1.2-4.3 1.8-6.6 1.8z"
            fill="#E5F1F9" p-id="893"></path>
          <path
            d="M352.2 240.7l154.8 88-151.3 86-151.3-86V326l147.8-85.3m0-27c-4.7 0-9.3 1.2-13.5 3.6L191 302.6c-8.3 4.8-13.5 13.7-13.5 23.3v2.7c0 9.7 5.2 18.6 13.6 23.4l151.3 86c4.1 2.3 8.7 3.5 13.3 3.5s9.2-1.2 13.3-3.5l151.3-86c8.4-4.8 13.6-13.7 13.6-23.4s-5.2-18.6-13.6-23.4l-154.8-88c-4.1-2.3-8.7-3.5-13.3-3.5z"
            fill="#282F63" p-id="894"></path>
          <path d="M227.2 339.4l147.7-85.3-22.7-13.4L204.4 326v2.7l22.8 12.9z" fill="#FFFFFF" p-id="895"></path>
          <path
            d="M666.7 432.9c-2.3 0-4.6-0.6-6.7-1.8l-159.7-90.8c-4.2-2.4-6.8-6.9-6.8-11.7s2.6-9.3 6.8-11.7l163.3-92.8c2.1-1.2 4.4-1.8 6.7-1.8s4.6 0.6 6.7 1.8l156.1 90.1c4.2 2.4 6.7 6.9 6.7 11.7v2.7c0 4.8-2.6 9.3-6.8 11.7l-159.7 90.8c-2.1 1.3-4.4 1.8-6.6 1.8z"
            fill="#1E62A1" p-id="896"></path>
          <path
            d="M670.2 235.8L826.3 326v2.7l-155.7 88.5-4 2.3L507 328.7l163.2-92.9m0-26.9c-4.6 0-9.2 1.2-13.3 3.5l-163.3 92.8c-8.4 4.8-13.6 13.7-13.6 23.4s5.2 18.6 13.6 23.4l159.7 90.8c4.1 2.3 8.7 3.5 13.3 3.5 4.6 0 9.2-1.2 13.3-3.5l4-2.3L839.6 352c8.4-4.8 13.6-13.7 13.6-23.4V326c0-9.6-5.1-18.5-13.5-23.3l-156.1-90.1c-4.1-2.5-8.7-3.7-13.4-3.7z"
            fill="#282F63" p-id="897"></path>
          <path
            d="M515.4 519c-2.3 0-4.6-0.6-6.7-1.8L349 426.4c-4.2-2.4-6.8-6.9-6.8-11.7s2.6-9.3 6.8-11.7l151.3-86c2.1-1.2 4.4-1.8 6.7-1.8s4.6 0.6 6.7 1.8l159.7 90.8c4.2 2.4 6.8 6.9 6.8 11.7s-2.6 9.3-6.8 11.7l-151.3 86c-2.1 1.2-4.4 1.8-6.7 1.8z"
            fill="#FFDBA0" p-id="898"></path>
          <path
            d="M507 328.7l159.7 90.8-151.3 86-155.5-88.4v-3 3l-4.2-2.4 151.3-86m0-27c-4.6 0-9.2 1.2-13.3 3.5l-151.3 86c-8.4 4.8-13.6 13.7-13.6 23.4s5.2 18.6 13.6 23.4l4.2 2.4 155.5 88.4c4.1 2.3 8.7 3.5 13.3 3.5 4.6 0 9.2-1.2 13.3-3.5l151.3-86c8.4-4.8 13.6-13.7 13.6-23.4s-5.2-18.6-13.6-23.4l-159.7-90.8c-4.1-2.3-8.7-3.5-13.3-3.5z"
            fill="#282F63" p-id="899"></path>
        </svg>
        <span class="home-Logo-text">邓波 &nbsp; | &nbsp;个人博客</span>
      </div>

      <div class="flex-grow" />
      <el-menu-item index="/">
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/tags">
        <el-icon>
          <CollectionTag />
        </el-icon>
        <!-- <router-link to="/tags">123</router-link> -->
        <span>标签</span>
      </el-menu-item>
      <el-menu-item index="/categories">
        <el-icon>
          <PriceTag />
        </el-icon>
        <span>分类</span>
      </el-menu-item>
      <el-menu-item index="/archives">
        <el-icon>
          <Wallet />
        </el-icon>
        <span>归档</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <el-icon>
          <Promotion />
        </el-icon>
        <span>关于</span>
      </el-menu-item>
      <el-menu-item index="/contact">
        <el-icon>
          <ChatDotRound />
        </el-icon>
        <span>留言板</span>
      </el-menu-item>
      <el-sub-menu index="/mine">
        <template #title>
          <el-icon>
            <UserFilled />
          </el-icon>我的
        </template>
        <el-menu-item index="7-1">个人信息
          <div class="flex-grow" />
          <el-icon>
            <ArrowRight />
          </el-icon>
        </el-menu-item>
        <el-menu-item index="7-2">我的点赞
          <div class="flex-grow" />
          <el-icon>
            <ArrowRight />
          </el-icon>
        </el-menu-item>
        <el-menu-item index="7-3">文章评论
          <div class="flex-grow" />
          <el-icon>
            <ArrowRight />
          </el-icon>
        </el-menu-item>
        <el-menu-item index="7-4">退出登录
          <div class="flex-grow" />
          <el-icon>
            <ArrowRight />
          </el-icon>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
  <router-view></router-view>
  <div class="footer-"></div>
</template>

<script setup lang="ts">
import router from './router'
import { ref } from 'vue'
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  router.push(key)
}
</script>

<style lang="less" scoped>
.header-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  // background-image: linear-gradient(to right, #5ab886 10%, #2881b8 90%);

  .el-menu,
  .el-menu-demo {
    background-color: rgb(60 92 198 / 0%);
    border: none;
    height: 100%;
    display: flex;
    align-items: center;

    .flex-grow {
      flex-grow: 1;
    }

    .header-LOGO {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 64px;
      text-align: center;
    }

    .el-menu-item:hover {
      background-color: rgb(255, 255, 255) !important;
    }

  }

  .home-Logo-text {
    font-size: 35px;
  }

  .el-menu--popup {
    max-width: 103px;
  }
}
</style>
